var curI=0;
var tabsStr=''
$('.pics').innerHTML=data.map(function(picObj,i){
    tabsStr+=`<span class="${curI===i ? 'active' : ''}"></span>`
    return `<li class="${curI === i? 'opacity' : ''}">
    <img src="${picObj.src}" alt="">
    <p>${picObj.des}</p></li>`
}).join('')

//  获取分页器并填入span
$('.page').innerHTML=tabsStr

// 获取分页器 和 图片
var page = [...$(".page").children] , 
    pics = [...$(".pics").children] ;
// 给span设置点击事件
page.forEach(function(span,i){
    span.onclick=function(){
        // 排他
        page[curI].classList.remove('active')
        pics[curI].classList.remove('opacity')
        curI=i
        page[curI].classList.add('active')
        pics[curI].classList.add('opacity')
    }
})
// 设置下一页点击事件
$('.next').onclick=function(){
    var index =curI + 1
    if( index > pics.length-1) index=0
    page[curI].classList.remove('active')
    pics[curI].classList.remove('opacity')
    curI=index
    page[curI].classList.add('active')
    pics[curI].classList.add('opacity')
    // changeTabFn(index)
}
// 设置上一页点击事件
$('.prev').onclick=function(){
    var index=curI-1
    if(index< 0 ) index=page.length-1
    changeTabFn(index)
}
// 设置定时器
var timer=setInterval(function(){
    var index= curI + 1
    if( index > pics.length-1) index=0
    changeTabFn(index)
},2000)
// 鼠标滑过
$('.banner').onmouseover=function(){
    clearInterval(timer)
}
// 鼠标离开
$('.banner').onmouseout=function(){
    timer=setInterval(function(){
        var index= curI + 1
        if( index > pics.length-1) index=0
        changeTabFn(index)
    },2000)
}
// 封装出现函数
function changeTabFn(i){
    page[curI].classList.remove('active')
    pics[curI].classList.remove('opacity')
    curI=i
    page[curI].classList.add('active')
    pics[curI].classList.add('opacity')
}
// 封装获取元素的函数
function $(el){
    return document.querySelector(el)
 }